<template>
	<view class="layout">
		<view class="" v-if="loadingStatus">
			<uni-load-more status="loading"></uni-load-more>
		</view>
		<view class="" v-else>
			<uni-forms ref="valiForm" :rules="rules" :modelValue="articleData" label-position="top">
				<uni-forms-item label="标题" required name="title">
					<uni-easyinput v-model="articleData.title" placeholder="请输入标题" />
				</uni-forms-item>
				<uni-forms-item label="作者" required name="author">
					<uni-easyinput v-model="articleData.author" placeholder="请输入作者" />
				</uni-forms-item>
				<uni-forms-item label="内容" required name="content">
					<uni-easyinput type="textarea" v-model="articleData.content" placeholder="请输入详细内容" />
				</uni-forms-item>
				<uni-forms-item label="图片内容">
					<uni-file-picker v-model="imageValue" fileMediatype="image" mode="grid" @select="select"
						@progress="progress" @success="success" @fail="fail" ></uni-file-picker>
				</uni-forms-item>
			</uni-forms>
			<button type="primary" @click="submit('valiForm')">修改</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				imageValue: [],
				articleData: {
					title: '',
					author: '',
					content: ''
				},
				picUrls: [],
				loadingStatus: false,
				rules: {
					title: {
						rules: [{
							required: true,
							errorMessage: '标题不能为空'
						}]
					},
					author: {
						rules: [{
							required: true,
							errorMessage: '作者不能为空'
						}]
					},
					content: {
						rules: [{
							required: true,
							errorMessage: '内容不能为空'
						}]
					}
				}
			};
		},
		onLoad(e) {
			console.log("e", e.id);
			this.getDetial(e.id)

		},
		methods: {
			// 获取上传状态
			select(e) {
				console.log('选择文件：', e)
			},
			// 获取上传进度
			progress(e) {
				console.log('上传进度：', e)
			},

			// 上传成功
			success(e) {
				console.log('上传成功', e)
				this.picUrls = e.tempFilePaths
			},

			// 上传失败
			fail(e) {
				console.log('上传失败：', e)
			},
			getDetial(id) {
				this.loadingStatus = true
				uniCloud.callFunction({
					name: "get_article_detail",
					data: {
						id
					}
				}).then(res => {
					this.loadingStatus = false
					console.log("res", res);
					this.articleData = res.result.data[0]
					console.log("articleData", this.articleData);
					if(!this.articleData.picUrls) return
					let urls = this.articleData.picUrls.map(item=>{
						return {url:item}
					})
					this.imageValue = urls
					


				})
			},
			submit(formName) {
				let _picUrls = this.imageValue.map(item=>{
					return item.url
				})
				// console.log("_picUrls",_picUrls);
				this.$refs[formName].validate().then((res) => {
					console.log('表单验证通过', res);
					// 提交表单数据
					console.log("articleData", this.articleData);
					uniCloud.callFunction({
						name: "update_article",
						data: {
							detail: this.articleData,
							picUrls: _picUrls
						}
					}).then(res => {
						console.log("res", res);
						if (res.result.code === 200) {
							uni.showToast({
								title: res.result.msg,
								icon: "success"
							})
							this.articleData = {}
							setTimeout(() => {
								uni.navigateBack()
							}, 800)

						}

					})

				}).catch((err) => {
					console.log('表单验证失败', err);
				});
			}
		}
	};
</script>

<style lang="scss" scoped>
	.layout {
		padding: 30rpx;
		background-color: #f9f9f9;
		min-height: 100vh;
		display: flex;
		flex-direction: column;

		::v-deep uni-forms {
			width: 100%;
			max-width: 600rpx;
			background-color: #fff;
			border-radius: 10rpx;
			padding: 20rpx;
			box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.1);

			::v-deep uni-forms-item {
				margin-bottom: 20rpx;

				::v-deep uni-easyinput {
					width: 100%;
					border: 1px solid #ccc;
					border-radius: 5rpx;
					padding: 10rpx;
					font-size: 30rpx;
					color: #333;

					&::placeholder {
						color: #999;
					}
				}
			}
		}

		::v-deep button {
			margin-top: 20rpx;
			width: 100%;
			max-width: 600rpx;
			height: 80rpx;
			line-height: 80rpx;
			background-color: #007aff;
			color: #fff;
			font-size: 32rpx;
			border: none;
			border-radius: 10rpx;
			box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.1);
		}
	}
</style>